<!-- @format -->

<template>
  <comp-layout hideHeader>
    <!-- 顶部导航 -->
    <!-- <view class="header-container"> -->
    <!-- 
       background="linear-gradient(135deg, #a742df 0%, #ff7eb3 100%)"
        textColor="#ffffff" -->
    <comp-header
      bgColor="linear-gradient(135deg, #c1e6ff 0%,#daefff  100%)"
      title="找教练"
      @getHeight="onGetHeight"
      showSearch
      placeholder="搜索场地名称、课程、位置"
    >
    </comp-header>

    <!-- 
          <template #right>
          <view class="search-container">
            <view class="search-box">
              <text class="search-icon">🔍</text>
              <comp-input
                v-model="searchKeyword"
                placeholder="搜索教练名称、课程、位置..."
                type="text"
                class="search-input"
                :border="false"
              />
            </view>
          </view>
        </template> -->
    <!-- 筛选栏 -->
    <view class="filter-bar" :style="{ top: theHeight + 'px' }">
      <view class="filter-item" @click="showSortModel = true">
        <text class="filter-text">{{ sortOptions[currentSort] }}</text>
        <text class="filter-icon">↓</text>
      </view>
      <view class="filter-item" @click="showRecommendModel = true">
        <text class="filter-text">推荐教练</text>
        <text class="filter-icon">↓</text>
      </view>
      <view class="filter-item" @click="showCourseTypeModel = true">
        <text class="filter-text">课程类型</text>
        <text class="filter-icon">↓</text>
      </view>
      <view class="filter-item" @click="showFilterModel = true">
        <text class="filter-text">筛选</text>
        <text class="filter-icon">≡</text>
      </view>
    </view>
    <view style="height: 50px"></view>

    <!-- </view> -->

    <!-- 教练列表 -->
    <view class="coach-list">
      <view
        v-for="(coach, index) in coachList"
        :key="index"
        class="coach-card"
        @click="navigateToCoachDetail(coach.id)"
      >
        <view class="coach-card-content">
          <!-- 教练头像 -->
          <view class="coach-avatar-container">
            <comp-image
              :src="coach.avatar"
              :width="180"
              :height="180"
              mode="aspectFill"
              class="coach-avatar"
            />
            <!-- 评分 -->
            <view class="coach-rating">
              <text>{{ coach.rating }}</text>
              <text class="rating-star">★</text>
            </view>
            <!-- 奖牌标识 -->
            <view class="coach-medal" v-if="coach.medal">
              <text class="medal-icon">🏅</text>
              <text>{{ coach.medal }}</text>
            </view>
          </view>

          <!-- 教练信息 -->
          <view class="coach-info">
            <view class="coach-header">
              <text class="coach-name">{{ coach.name }}</text>
              <text class="coach-price">¥{{ coach.price }}/h起</text>
            </view>

            <view class="coach-subinfo">
              <text
                >{{ coach.specialty }} | {{ coach.experience }}年教龄 |
                已认证</text
              >
            </view>

            <!-- 标签 -->
            <view class="coach-tags">
              <view
                v-for="(tag, tagIndex) in coach.tags"
                :key="tagIndex"
                class="coach-tag"
              >
                {{ tag }}
              </view>
            </view>

            <!-- 位置信息 -->
            <view class="coach-location">
              <text class="location-icon">📍</text>
              <text>{{ coach.location }} · {{ coach.distance }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 排序选项弹窗 -->
    <comp-model v-model="showSortModel" title="排序方式" position="bottom">
      <view class="sort-options">
        <view
          v-for="(option, index) in sortOptions"
          :key="index"
          class="sort-option-item"
          :class="{ active: currentSort === index }"
          @click="selectSort(index)"
        >
          <text>{{ option }}</text>
          <text v-if="currentSort === index" class="check-icon">✓</text>
        </view>
      </view>
    </comp-model>

    <!-- 推荐教练弹窗 -->
    <comp-model v-model="showRecommendModel" title="推荐教练" position="bottom">
      <view class="filter-options">
        <view
          v-for="(option, index) in recommendOptions"
          :key="index"
          class="filter-option-item"
          :class="{ active: currentRecommend === index }"
          @click="selectRecommend(index)"
        >
          <text>{{ option }}</text>
          <text v-if="currentRecommend === index" class="check-icon">✓</text>
        </view>
      </view>
    </comp-model>

    <!-- 课程类型弹窗 -->
    <comp-model
      v-model="showCourseTypeModel"
      title="课程类型"
      position="bottom"
    >
      <view class="filter-options">
        <view
          v-for="(option, index) in courseTypeOptions"
          :key="index"
          class="filter-option-item"
          :class="{ active: selectedCourseTypes.includes(index) }"
          @click="toggleCourseType(index)"
        >
          <text>{{ option }}</text>
          <text v-if="selectedCourseTypes.includes(index)" class="check-icon"
            >✓</text
          >
        </view>
      </view>
      <view class="filter-actions">
        <view class="filter-btn filter-btn-reset" @click="resetCourseTypes"
          >重置</view
        >
        <view class="filter-btn filter-btn-confirm" @click="confirmCourseTypes"
          >确定</view
        >
      </view>
    </comp-model>

    <!-- 筛选弹窗 -->
    <comp-model v-model="showFilterModel" title="筛选" position="bottom">
      <view class="filter-section">
        <view class="filter-section-title">价格区间</view>
        <view class="price-range">
          <view
            v-for="(range, index) in priceRanges"
            :key="index"
            class="price-range-item"
            :class="{ active: selectedPriceRange === index }"
            @click="selectPriceRange(index)"
          >
            <text>{{ range }}</text>
          </view>
        </view>
      </view>

      <view class="filter-section">
        <view class="filter-section-title">教龄</view>
        <view class="experience-range">
          <view
            v-for="(range, index) in experienceRanges"
            :key="index"
            class="experience-range-item"
            :class="{ active: selectedExperienceRange === index }"
            @click="selectExperienceRange(index)"
          >
            <text>{{ range }}</text>
          </view>
        </view>
      </view>

      <view class="filter-section">
        <view class="filter-section-title">其他筛选</view>
        <view class="other-filters">
          <view
            v-for="(filter, index) in otherFilters"
            :key="index"
            class="other-filter-item"
            :class="{ active: selectedOtherFilters.includes(index) }"
            @click="toggleOtherFilter(index)"
          >
            <text>{{ filter }}</text>
          </view>
        </view>
      </view>

      <view class="filter-actions">
        <view class="filter-btn filter-btn-reset" @click="resetAllFilters"
          >重置</view
        >
        <view class="filter-btn filter-btn-confirm" @click="confirmAllFilters"
          >确定</view
        >
      </view>
    </comp-model>
  </comp-layout>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import CompModel from '@/components/comp-model/Index.vue';
  import CompImage from '@/components/comp-image/Index.vue';
  import compHeader from '@/components/comp-header/Index.vue';
  import { onShow } from '@dcloudio/uni-app';

  // 使用uni-app支持的图标

  // 搜索关键词
  const searchKeyword = ref('');

  // 排序相关
  const showSortModel = ref(false);
  const currentSort = ref(0);
  const sortOptions = [
    '综合排序',
    '评分最高',
    '价格最低',
    '价格最高',
    '距离最近',
  ];

  // 推荐教练相关
  const showRecommendModel = ref(false);
  const currentRecommend = ref(0);
  const recommendOptions = [
    '全部教练',
    '金牌教练',
    '银牌教练',
    '铜牌教练',
    '新晋教练',
  ];

  const theHeight = ref(0);
  const onGetHeight = (height: number) => {
    console.log('height ===>', height);

    theHeight.value = height;
  };
  // 课程类型相关
  const showCourseTypeModel = ref(false);
  const selectedCourseTypes = ref<number[]>([]);
  const courseTypeOptions = [
    '瑜伽',
    '健身',
    '舞蹈',
    '高尔夫',
    '疗愈',
    '游泳',
    '网球',
    '篮球',
    '足球',
    '武术',
  ];

  // 筛选相关
  const showFilterModel = ref(false);

  // 价格区间
  const selectedPriceRange = ref(-1);
  const priceRanges = [
    '不限',
    '0-200元/小时',
    '200-300元/小时',
    '300-500元/小时',
    '500元以上/小时',
  ];

  // 教龄区间
  const selectedExperienceRange = ref(-1);
  const experienceRanges = ['不限', '1-3年', '3-5年', '5-10年', '10年以上'];

  // 其他筛选
  const selectedOtherFilters = ref<number[]>([]);
  const otherFilters = ['认证教练', '可上门', '可线上', '有优惠'];

  // 选择排序方式
  const selectSort = (index: number) => {
    currentSort.value = index;
    showSortModel.value = false;
  };

  // 选择推荐教练
  const selectRecommend = (index: number) => {
    currentRecommend.value = index;
    showRecommendModel.value = false;
  };

  // 切换课程类型
  const toggleCourseType = (index: number) => {
    const position = selectedCourseTypes.value.indexOf(index);
    if (position === -1) {
      selectedCourseTypes.value.push(index);
    } else {
      selectedCourseTypes.value.splice(position, 1);
    }
  };

  // 重置课程类型
  const resetCourseTypes = () => {
    selectedCourseTypes.value = [];
  };

  // 确认课程类型
  const confirmCourseTypes = () => {
    showCourseTypeModel.value = false;
  };

  // 选择价格区间
  const selectPriceRange = (index: number) => {
    selectedPriceRange.value = index;
  };

  // 选择教龄区间
  const selectExperienceRange = (index: number) => {
    selectedExperienceRange.value = index;
  };

  // 切换其他筛选
  const toggleOtherFilter = (index: number) => {
    const position = selectedOtherFilters.value.indexOf(index);
    if (position === -1) {
      selectedOtherFilters.value.push(index);
    } else {
      selectedOtherFilters.value.splice(position, 1);
    }
  };

  // 重置所有筛选
  const resetAllFilters = () => {
    selectedPriceRange.value = -1;
    selectedExperienceRange.value = -1;
    selectedOtherFilters.value = [];
  };

  // 确认所有筛选
  const confirmAllFilters = () => {
    showFilterModel.value = false;
  };

  // 跳转到教练详情
  const navigateToCoachDetail = (id: number) => {
    uni.navigateTo({
      url: `/subpackages/coach/pages/coach-detail/Index?id=${id}`,
    });
  };

  // 模拟教练数据
  const coachList = ref([
    {
      id: 1,
      name: '林教练',
      avatar:
        'https://www4.bing.com//th?id=OHR.Castildetierra_ZH-CN6042529770_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      rating: 5.0,
      medal: '金牌',
      price: 200,
      specialty: '瑜伽',
      experience: 5,
      tags: ['哈他瑜伽', '流瑜伽', '阴瑜伽'],
      location: '朝阳区',
      distance: '1.2km',
    },
    {
      id: 2,
      name: '张教练',
      avatar:
        'https://www4.bing.com//th?id=OHR.Castildetierra_ZH-CN6042529770_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      rating: 4.9,
      medal: '银牌',
      price: 280,
      specialty: '健身',
      experience: 7,
      tags: ['力量训练', '减脂塑形', '普拉提'],
      location: '海淀区',
      distance: '2.5km',
    },
    {
      id: 3,
      name: '王教练',
      avatar:
        'https://www4.bing.com//th?id=OHR.Castildetierra_ZH-CN6042529770_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      rating: 4.8,
      medal: '',
      price: 320,
      specialty: '舞蹈',
      experience: 10,
      tags: ['拉丁舞', '爵士舞', 'Hip-Hop'],
      location: '朝阳区',
      distance: '0.8km',
    },
    {
      id: 4,
      name: '赵教练',
      avatar:
        'https://www4.bing.com//th?id=OHR.Castildetierra_ZH-CN6042529770_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      rating: 4.7,
      medal: '',
      price: 350,
      specialty: '高尔夫',
      experience: 8,
      tags: ['入门教学', '技术提升', '竞技培训'],
      location: '丰台区',
      distance: '5.3km',
    },
    {
      id: 5,
      name: '李教练',
      avatar:
        'https://www4.bing.com//th?id=OHR.Castildetierra_ZH-CN6042529770_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
      rating: 5.0,
      medal: '',
      price: 250,
      specialty: '疗愈',
      experience: 6,
      tags: ['冥想', '声疗', '身心平衡'],
      location: '西城区',
      distance: '3.7km',
    },
  ]);

  // const query = uni.createSelectorQuery().in();
  // query
  //   .select('#filter-bar')
  //   .boundingClientRect((data) => {
  //     if (data) {
  //       // elementHeight.value = data.height;
  //       console.log('元素高度:', data.height);
  //     }
  //   })
  //   .exec();
</script>

<style lang="scss" scoped>
  .header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .search-container {
    margin-top: 10rpx;
    padding: 0 20rpx;
  }

  .search-box {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 100rpx;
    padding: 10rpx 20rpx;
  }

  .search-icon {
    margin-right: 10rpx;
    color: #ffffff;
    opacity: 0.8;
  }

  .search-input {
    flex: 1;
    background-color: transparent;
    color: #ffffff;
    font-size: 28rpx;
  }

  .filter-bar {
    z-index: 3;
    position: fixed;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    border-bottom: 1rpx solid #f0f0f0;
    box-sizing: border-box;
  }

  .filter-item {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
  }

  .filter-text {
    font-size: 28rpx;
    color: #333;
  }

  .filter-icon {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
  }

  .coach-list {
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    background-color: $bg;
  }

  .coach-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 30rpx;
    overflow: hidden;
    padding: 20rpx;
  }

  .coach-card-content {
    display: flex;
  }

  .coach-avatar-container {
    position: relative;
    // width: 33.33%;
    // aspect-ratio: 1/1;
  }

  .coach-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .coach-rating {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    background-color: rgba(167, 66, 223, 0.8);
    color: #ffffff;
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    border-radius: 100rpx;
    display: flex;
    align-items: center;
  }

  .rating-star {
    color: #ffeb3b;
    margin-left: 4rpx;
  }

  .coach-medal {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: rgba(255, 193, 7, 0.9);
    color: #ffffff;
    font-size: 22rpx;
    padding: 4rpx 8rpx;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
  }

  .medal-icon {
    margin-right: 4rpx;
  }

  .coach-info {
    // width: 66.67%;
    // padding: 20rpx;
    margin-left: 20rpx;
    width: calc(100% - 20rpx);
  }

  .coach-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .coach-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .coach-price {
    font-size: 28rpx;
    font-weight: 500;
    color: #a742df;
  }

  .coach-subinfo {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .coach-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16rpx;
  }

  .coach-tag {
    background-color: rgba(255, 126, 179, 0.1);
    color: #ff7eb3;
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 100rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

  .coach-location {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
  }

  .location-icon {
    margin-right: 6rpx;
  }

  .sort-options,
  .filter-options {
    padding: 20rpx 0;
  }

  .sort-option-item,
  .filter-option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    font-size: 30rpx;
    color: #333;
  }

  .sort-option-item.active,
  .filter-option-item.active {
    color: #a742df;
  }

  .check-icon {
    color: #a742df;
    font-weight: bold;
  }

  .filter-section {
    padding: 20rpx 40rpx;
  }

  .filter-section-title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
    color: #333;
  }

  .price-range,
  .experience-range,
  .other-filters {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
  }

  .price-range-item,
  .experience-range-item,
  .other-filter-item {
    padding: 10rpx 20rpx;
    background-color: #f5f5f5;
    border-radius: 100rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 26rpx;
    color: #666;
  }

  .price-range-item.active,
  .experience-range-item.active,
  .other-filter-item.active {
    background-color: rgba(167, 66, 223, 0.1);
    color: #a742df;
    border: 1rpx solid #a742df;
  }

  .filter-actions {
    display: flex;
    padding: 30rpx 40rpx;
    border-top: 1rpx solid #f0f0f0;
  }

  .filter-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100rpx;
    font-size: 28rpx;
  }

  .filter-btn-reset {
    background-color: #f5f5f5;
    color: #666;
    margin-right: 20rpx;
  }

  .filter-btn-confirm {
    background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
    color: #ffffff;
  }
</style>
